<template>
	<view class="pages-home rel">
		<banner :list="detail.imgs" :margin="0" :autoplay="true" :height="400" :indicatorActiveColor="primaryColor">
		</banner>
		<view class="fill-base pd-lg">
			<view class="f-sm-title c-title text-bold">{{detail.title}}</view>
			<view
				:style="detail.material_price*1>0?'display: flex;align-items: center;justify-content: space-between;':'display: flex;justify-content: flex-end;'">
				<view class="f-caption c-caption mt-sm" v-if="detail.material_price*1>0">
					物料费 ¥{{detail.material_price}}
				</view>
				<view class="" style="width: 400rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;">
				</view>
			</view>
			<view class="flex-y-baseline f-desc c-caption mt-sm">
				<view class="flex-y-baseline flex-1">
					<view class="flex-y-baseline f-icontext c-orange text-bold mr-sm">
						<b class="f-paragraph c-orange">￥</b>
						<view class="f-big-title">
							{{detail.price}}
						</view>
					</view>
					<view class="text-delete mr-md" v-if="detail.init_price">¥{{detail.init_price}}</view>
					<view class="flex-y-baseline flex-1" v-if="detail.is_diet == 0">
						<i class="iconfont icon-shijian mr-sm" :style="{ color: primaryColor }"></i>
						{{detail.time_long}}分钟
					</view>
					<view>超{{detail.total_sale}}人选择</view>
				</view>
			</view>
		</view>
		<view class="space-md"></view>
		<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
			width="33.3%" height="100rpx"></tab>
		<view class="space-md"></view>
		<view class="fill-base pd-lg f-paragraph c-desc">
			<view class="c-title text-bold mb-md">{{tabList[activeIndex].title}}</view>
			<parser :html="detail[rule[activeIndex]]" @linkpress="linkpress" show-with-animation lazy-load>加载中...
			</parser>
		</view>
		<view class="space-max-footer"></view>
		<view class="" style="position: fixed;bottom: 0;width: 100%;background-color: #fff;">
			<view class="btn" @click="toshow" v-if="!show7">支付</view>
		</view>
		<u-popup :show="show7" @close="close7" mode="bottom" :round="10">
			<view style="padding:30rpx;">
				<view class="label_l">选择支付方式</view>
				<view class="mt-md ml-lg mr-lg fill-base radius-16">
					<view @tap.stop="toChangeItem(index,2)" class="flex-between pt-lg pb-lg ml-lg mr-lg"
						:class="[{'b-1px-t':index!=0}]" v-for="(item,index) in payList" :key="index">
						<view class="flex-y-center f-title c-title">
							<i class="iconfont mr-md" :class="item.icon"
								:style="{color:item.id==1?primaryColor:'',fontSize:'50rpx'}"></i>
							{{item.title}}
							<view class="f-paragraph c-caption ml-md" v-if="item.id == 2">
								余额{{userInfo.balance || 0}}元
							</view>
						</view>
						<view class="flex-y-center c-caption" :style="{color:payInd == index ? primaryColor:''}">
							<i class="pay-icon iconfont icon-xuanze mr-sm"
								:class="[{'icon-radio-fill':item.is_disabled || payInd == index}]"></i>
						</view>
					</view>
				</view>
				<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
					:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="topay">
				<view class="btns">确认支付</view>
				</auth>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import parser from "@/components/jyf-Parser/index"
	import shopBanner from "@/components/shop-banner"
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {
			parser,
			shopBanner
		},
		data() {
			return {
				orderId: '',
				oId: '',
				show7: false,
				payInd: 0,
				payList: [{
						id: 1,
						icon: 'iconweixinzhifu1',
						title: '微信支付'
					},
					{
						id: 2,
						icon: 'iconqianbao c-balance',
						title: '账户余额',
						is_disabled: false
					}
				],
				tabList: [{
					title: '项目介绍',
					id: 0
				}, {
					title: '禁忌说明',
					id: 1,
				}, {
					title: '下单须知',
					id: 2
				}],
				ftList: [{
					icon: 'icon-kzj',
					text: '实名认证'
				}, {
					icon: 'icon-kpk',
					text: '爽约包赔'
				}, {
					icon: 'icon-kzz',
					text: '资质证书'
				}],
				rule: {
					0: 'introduce',
					1: 'explain',
					2: 'notice'
				},
				activeIndex: 0,
				userInfo: {},
				detail: {}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			isGzhLogin: state => state.user.isGzhLogin,
		}),
		onLoad(options) {
			this.orderId = options.id
			this.oId = options.oId
			this.getuserInfo()
			this.getDetail(options.oId)
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onShareAppMessage() {
			let {
				id,
				name: title,
				cover: imageUrl
			} = this.shopInfo
			let path = `/technician/pages/shop/detail?id=${id}&pid=${this.userInfo.id}`
			return {
				title,
				imageUrl,
				path
			}
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			async getuserInfo() {
				var res = await this.$api.mine.index()
				this.userInfo = res
			},
			async getDetail(id) {
				let res = await this.$api.service.serviceInfo({
					id: id
				})
				this.detail = res
			},
			toshow(){
				this.show7 = true
				this.getuserInfo()
			},
			initRefresh() {
				this.initIndex(true)
			},
			async topay() {
				let pay_model = this.payList[this.payInd].id
				let isBus = await this.$api.order.paymentOnBehalf({
					order_id: this.orderId,
					pay_model: pay_model
				})
				if (pay_model == 1) {
					await this.$util.pay(isBus.pay_list)
					this.$util.showToast({
						title: `支付成功`
					})
					setTimeout(() => {
						this.lockTap = false
						this.$util.goUrl({
							url: '/pages/service',
							openType: `reLaunch`
						})
					}, 100)
				}
				if (pay_model == 2) {
					this.$util.showToast({
						title: `支付成功`
					})
					setTimeout(() => {
						this.lockTap = false
						this.$util.goUrl({
							url: '/pages/service',
							openType: `reLaunch`
						})
					}, 100)
				}

			},
			async initIndex(refresh = false) {
				let {
					pid = 0
				} = this.options
				let {
					isGzhLogin
				} = this
				let {
					id: uid = 0
				} = this.userInfo
				if (pid && !uid) {
					// #ifdef H5
					if (isGzhLogin) {
						setTimeout(() => {
							this.getUserInfo()
						}, 1000)
					} else {
						this.getUserInfo()
					}
					// #endif
					// #ifndef H5
					await this.getUserInfo()
					// #endif 
				}

				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				await this.goodsInfoCall()
				// #ifdef H5
				if (this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					setTimeout(() => {
						this.toAppShare()
					}, 1200)
				}
				// #endif
			},
			linkpress(res) {
				// #ifdef APP-PLUS
				this.$util.goUrl({
					url: res.href,
					openType: 'web'
				})
				// #endif
			},
			handerTabChange(index) {
				this.activeIndex = index;
			},
			async goodsInfoCall() {
				this.$util.showLoading()
				let {
					id
				} = this.options
				this.shopInfo = await this.$api.technician.goodsInfo({
					id
				})
				this.isLoad = true
				this.$util.hideAll()
			},
			swiperChange(e) {},
			close7() {
				this.show7 = false;
			},
			toChangeItem(index) {
				console.log(index)
				this.payInd = index;
			},
			linkpress(res) {
				// #ifdef APP-PLUS
				if (/http/.test(res.href))
					this.$util.goUrl({
						url: res.href,
						openType: 'web'
					})
				// #endif
			},
			toAppShare() {
				let {
					id: pid = 0
				} = this.userInfo
				let {
					id,
					name: title,
					cover: imageUrl
				} = this.shopInfo
				let summary = ''
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/technician/pages/shop/detail?id=${id}&pid=${pid}`

				// #ifdef H5
				this.$jweixin.wxReady(() => {
					this.$jweixin.showOptionMenu()
					this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
					this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				})
				// #endif
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: 'WXSceneSession',
					type: 0,
					href,
					title,
					summary,
					imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.shop {
		.shop-swiper {
			height: 564rpx;
		}

		.shop-box-title {
			line-height: 110rpx;
			height: 110rpx;
		}

		.shop-box-item {
			width: 100%;
			height: 388rpx;

			image {
				vertical-align: bottom;
				width: 100%;
				height: 100%;
			}
		}

		.share-btn {
			right: 30rpx;
			bottom: 30rpx;
			height: 42rpx;
		}
	}
.btn {
		background-color: #07c160;
		color: #fff;
		border-radius: 18rpx;
		text-align: center;
		width: 80%;
		margin: 30rpx auto 0;
		padding: 20rpx 0;
		font-size: 28rpx;
		
	}
	.btns {
		background-color: #07c160;
		color: #fff;
		border-radius: 18rpx;
		text-align: center;
		width: 80%;
		margin: 30rpx auto 0;
		padding: 20rpx 0;
		font-size: 28rpx;
	}
</style>